import { useState } from "react";
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import { Radio, RadioButton, RadioGroup } from "components/Radio";

<Meta title="Components/Radio" component={Radio} />

# Radio

A Wrap of html Radio.

## Props

All of the html Radio props can be used.

<Props of={Radio} />

## Examples

### Basic

Basic usages for `Radio` component.

<Preview>
  <Story name="basic radio">
    {() => {
      const [value, setValue] = useState(1);
      return (
        <>
          <Radio
            name="test1"
            checked={value === 1}
            onChange={(checked) => setValue(1)}
          >
            Test1
          </Radio>
          <Radio
            name="test2"
            checked={value === 2}
            onChange={(checked) => setValue(2)}
          >
            Test2
          </Radio>
          <Radio
            name="test3"
            checked={value === 3}
            onChange={(checked) => setValue(3)}
            disabled
          >
            Test3
          </Radio>
        </>
      );
    }}
  </Story>
</Preview>

# RadioGroup

A Wrap of html RadioGroup.

## Props

All of the html RadioGroup props can be used.

<Props of={RadioGroup} />

## Examples

### Basic

Basic usages for `RadioGroup` component.

<Preview>
  <Story name="basic radio group">
    {() => {
      const options = [
        {
          label: "中国",
          value: "China",
        },
        {
          label: "巴西",
          value: "Brazil",
        },
        {
          label: "俄罗斯",
          value: "Russian",
        },
        {
          label: "南非",
          value: "South Africa",
        },
        {
          label: "印度",
          value: "Indian",
        },
      ];
      return <RadioGroup name="test" options={options} />;
    }}
  </Story>
</Preview>

<Preview>
  <Story name="basic radio group button">
    {() => {
      const options = [
        {
          label: "中国",
          value: "China",
        },
        {
          label: "巴西",
          value: "Brazil",
        },
        {
          label: "俄罗斯",
          value: "Russian",
        },
        {
          label: "南非",
          value: "South Africa",
        },
        {
          label: "印度",
          value: "Indian",
        },
      ];
      return (
        <RadioGroup buttonWidth={100} wrapClassName="radio-group-button">
          {options.map((option) => (
            <RadioButton key={option.value} value={option.value}>
              {option.label}
            </RadioButton>
          ))}
        </RadioGroup>
      );
    }}
  </Story>
</Preview>
